<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>会员列表</title>
	<link rel="stylesheet" href="../../plugins/layui/css/layui.css" media="all">
	<link rel="stylesheet" href="../../common.css">
	<style>
		
		.iframe-top {
			margin-top: 20px;
		}
		.iframe-select {
			width: 150px;
		}
		
		.iframe-input1 {
			width: 350px !important;
		}
		
		.iframe-btn1 {
			width: 100px !important;
		}

	</style>
</head>

<body>
	<div class="layui-fluid iframe-top" id="memberlist">
		<div class="layui-form-query">
			<form class="layui-form" id="query_form">
				<div class="layui-form-item">
					<div class="layui-row">
						<div class="layui-inline">
							<label class="layui-form-mid">时间：</label>
							<div class="layui-input-inline">
								<input type="text" name="CreatedAtFrom" id="date1" lay-verify="date" placeholder="yyyy-MM-dd" autocomplete="off" class="layui-input">
							</div>
							<a href="javascript:;" class="datelink">~</a>
							<div class="layui-input-inline">
								<input type="text" name="CreatedAtTo" id="date2" lay-verify="date" placeholder="yyyy-MM-dd" autocomplete="off" class="layui-input">
							</div>
						</div>
						<div class="layui-inline">
							<label class="layui-form-mid">公司名称：</label>
							<div class="layui-input-inline iframe-select">
								<select name="EntCompanyId" class="lay-ignore" lay-ignore @change="linkagesel(selected)" v-model="selected">
									<option value="">--请选择--</option>
									<option v-for="option in baseData.entCompany.items" :value="option.id">{{ option.name }}</option>
								</select>
							</div>
						</div>
						<div class="layui-inline">
							<label class="layui-form-mid">药店名称：</label>
							<div class="layui-input-inline iframe-select">
								<select name="EntStoreId" class="lay-ignore" lay-ignore>
									<option value="">--请选择--</option>
									<option v-for="option in linkage" :value="option.key">{{ option.value }}</option>
								</select>
							</div>
						</div>
						<div class="layui-inline">
							<div class="layui-input-inline iframe-input1">
								<input class="layui-input" type="text" name="Text" autocomplete="off" placeholder="请输入用户编号/手机号/备注信息">
							</div>
						</div>
						<div class="layui-inline iframe-btn1">
							<div class="layui-input-inline">
								<button class="layui-btn" type="button" data-type="search"><i class="layui-icon">&#xe615;</i>搜索</button>
							</div>
						</div>
					</div>
				</div>
			</form>
		</div>
		<table id="layui-table" lay-filter="layui-action"></table>
	</div>
	<script src="../../plugins/layui/layui.js"></script>
	<script src="../../plugins/vue.min.js"></script>
	<script src="../../common.js"></script>
	<script>
		// 基础数据
		var basedata = {
			"entCompany": {
				"items": []
			}
		}

		var vm = new Vue({
			el: "#memberlist",
			data: {
				baseData: basedata,
				selected: '',
				remarks: '',
				// 公司-药店联动
				linkage: [],
				pageCurr: 1
			},
			created() {
				layui.use(['jquery', 'layer', 'table', 'laydate', 'ajaxmod'], function() {
					var $ = layui.jquery,
						table = layui.table,
						laydate = layui.laydate,
						ajaxmod = layui.ajaxmod;

					// 基础数据获取
					ajaxmod.layuiGet("/datas/staticdata.json", "", function(res) {
						if(res.success) {
							vm.baseData = res.data;
							console.log(vm.baseData);
						} else {
							layer.msg(res.message, {icon: 2});
						}
					},1);

					//日期 1
					laydate.render({
						elem: '#date1',
					});

					//日期 2
					laydate.render({
						elem: '#date2',
					});

					table.render({
						elem: '#layui-table',
						url: '/demo/table/user/',
						page: true,
						limit: 16,
						height: 'full-110',
						limits: [10, 15, 20, 25, 30],
						id: 'tableReload',
						loading: true,
						method: 'get',
						where: {
							token: cookie.get('usertoken')
						},
						request: {

						},
						response: {
//							statusCode: 200,
//							msgName: 'message',
						},
						cols: [
							[{
								field: 'id',
								unresize: true,
								title: 'ID',
							}, {
								field: 'username',
								unresize: true,
								title: '用户名',
							}, {
								field: 'sex',
								unresize: true,
								title: '性别',
							}, {
								field: 'city',
								unresize: true,
								title: '城市',
							}, {
								field: 'sign',
								unresize: true,
								title: '签名',
							}, {
								field: 'experience',
								unresize: true,
								title: '积分',
							}, {
								field: 'score',
								unresize: true,
								title: '评分',
							}, {
								field: 'classify',
								unresize: true,
								title: '职业',
							}, {
								field: 'wealth',
								unresize: true,
								title: '财富',

							}, {
								fixed: 'right',
								unresize: true,
								title: '操作',
								width: '10%',
								toolbar: '#barAction'
							}]
						],

						done: function(res, curr, count) {
							vm.pageCurr = curr;

						}
					});

					// 操作事件
					table.on('tool(layui-action)', function(obj) {
						var data = obj.data;
						//获得 lay-event 对应的值（也可以是表头的 event 参数对应的值）
						var layEvent = obj.event;
						//获得当前行 tr 的DOM对象
						var tr = obj.tr;

						if(layEvent === 'remarks') {
							vm.remarks = data.remarks;
							// 赋值
							layer.open({
								title: '会员备注',
								area: ['600px', '340px'],
								content: `<form id="remarksshow"><div class="layui-form-item"><label class="layui-form-label">备注信息:</label><div class="layui-input-block"><input class="layui-input" type="hidden" name="Id" value="` + data.id + `"><textarea name="Remark" placeholder="请输入内容" class="layui-textarea" style="resize:none" rows=8>` + data.remark + `</textarea></div></div></form>`,
								offset: '200px',
								btn: ['确定', '取消'],
								// 确认回掉
								yes: function(index, layero) {
									var data = $("#remarksshow").serialize();
									// 会员管理备注
									ajaxmod.layuiPost("/api/sys/platformuser/UpdateRemark", data, function(res) {
										if(res.success){
											layer.closeAll();
											$(".layui-laypage-btn").click();
											layer.msg('操作成功', {icon: 1});
						                }else{
						                	layer.msg(res.message, {icon: 2});
						            	}
									})
									return false;
								},
								btn2: function(index, layero) {

								},
								// 成功回掉
								success: function(layero, index) {

								},
							});
						} else {
							alert("error");
						}
					});

					// 触发函数
					var active = {
						// 查询
						search: function() {
							// 查询条件
							table.reload('tableReload', {
								page: {
									curr: 1
								},
								where: unserialize(decodeURIComponent($("#query_form").serialize(),true))
							});
						},
					};

					// 按钮搜索
					$('#memberlist .layui-btn').on('click', function() {
						var type = $(this).data('type');
						active[type] ? active[type].call(this) : '';
					});
					
					// 回车搜索
					$('#memberlist input').on('keyup', function(e){
						if (e.keyCode == 13) {
							active.search();
						}
					});
				})
			},
			methods: {
				linkagesel(sel) {
					for(var key of vm.baseData.entCompany.items) {
						if(sel === key.id) {
							vm.linkage = key.stores
						}
					}
				}
			}
		})
	</script>
	<!-- 操作 -->
	<script type="text/html" id="barAction">
		<a class="layui-btn layui-btn-normal layui-btn-xs" lay-event="remarks"><i class="layui-icon">&#xe63a;</i>备注</a>
	</script>
</body>
</html>